<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <title>二123级页面</title>
    <link rel="stylesheet" href="dragStatic/css/modelLay.css"/>
    <script src="dragStatic/js/jquery-3.2.1.min.js"></script>
    <script src="dragStatic/js/common.js"></script>
    <script src="dragStatic/js/Tdrag.js"></script>
    <style>
        .list{width:17.2rem;height: 7.99rem;background-color:#fff;padding-left:0.24rem;}
        .screenArea{width:16.28rem;height: 7rem;background-color:#f6f6f6;padding:0.1rem 0.1rem;}
        .screenBorder{width: 100%;height: 100%;border:2px solid #337e97;overflow: scroll;
            padding:0.2rem 0 0 0.3rem;
        }
        .bigBox{height:4.6rem;}
        .dragList{position: relative;height: 6.2rem;}
        .dragScreen,.addScreen{position: absolute;top:0;cursor: pointer;}
        .dragScreen .screenBox{position: relative;width:100%;height: 100%;background: url(dragStatic/images/dragBg.png);background-size: 100% 100%;}
        .dragScreen .screenBox .moduleImg{position: absolute;z-index: 1}
        .dragScreen .screenBox .closeBtn{width: 0.32rem;position: absolute;right:-0.16rem;top:-0.16rem;}
        .addScreen img{margin:0 auto 0.1rem;}
        .addScreen p{font-size:0.2rem;color:#3b404d;text-align: center;}
        .page{
            position: absolute;
            top:5.8rem;
            background-color:#33a7fe;
            width: 2.14rem;
            height:0.4rem;
            line-height:0.4rem;
            text-align: center;
            font-size: 0.26rem;
            color:#fff;
            -webkit-border-radius: 0.2rem;
            -moz-border-radius: 0.2rem;
            border-radius: 0.2rem;
            cursor: pointer;
        }
        .tipInfo{font-size: 0.26rem;color:#3b404d;text-align: center;letter-spacing: 4px;margin-top:0.1rem;}
        .tipInfo .timeShow{width:0.8rem;display: inline-block;vertical-align:middle;margin:0 0.16rem;font-size: 0.42rem;color:#00a192;padding:0 0.22rem;border:1px solid #337e97;}
        .tipInfo .timeModify{display: inline-block;vertical-align:middle;margin-left:0.16rem;font-size: 0.2rem;color:#fff;height:0.3rem;line-height:0.3rem;padding:0 0.14rem;background-color:#33a7fe;
            -webkit-border-radius: 0.2rem;
            -moz-border-radius: 0.2rem;
            border-radius: 0.2rem;
            cursor: pointer
        }
    </style>
</head>
<body>
<div class="list">
    <div class="screenArea">
        <div class="screenBorder">
            <div class="bigBox">
                <div class="dragList fl">

                    <!--<div class="dragScreen fl" data-category="default2">-->
                        <!--<div class="screenBox">-->
                            <!--<img src="dragStatic/images/screen2.jpg" alt=""/>-->
                            <!--<img src="dragStatic/images/closeBtn.png" alt="" class="closeBtn"/>-->
                        <!--</div>-->
                    <!--</div>-->
                    <!--<div class="page" data-index="0">版面1</div>-->

                    <!--<div class="dragScreen fl" data-category="default2">-->
                        <!--<div class="screenBox">-->
                            <!--<img src="dragStatic/images/screen2.jpg" alt=""/>-->
                            <!--<img src="dragStatic/images/closeBtn.png" alt="" class="closeBtn"/>-->
                        <!--</div>-->
                    <!--</div>-->
                    <!--<div class="page" data-index="1">版面2</div>-->
                    <div class="addScreen" data-category="newScreen"><img src="dragStatic/images/addScreen.png" alt=""/><p>新增加版面</p></div>
                </div>
            </div>
        </div>
    </div>
    <div class="tipInfo">此处模块以轮播方式在大屏上显示，间隔时间设置为<input class="timeShow" placeholder="30"/>秒<span class="timeModify">点击修改</span></div>
    <script>$('.timeModify').click(function(){alert("修改轮播间隔时间成功！")})</script>
</div>
</body>
<script>
    $(window).resize(function() {
        rem();
    });
    $(function() {
        rem();
        var setWidth=960;////setWidth,setHeight表示当前画布的宽高，设置初始化默认值是16:9的，960  540
        var setHeight=540;
        var storage=window.localStorage;
        if(storage.getItem("setWidth")&&storage.getItem("setHeight")){
            setWidth=storage.getItem("setWidth");
            setHeight=storage.getItem("setHeight");
        }
        attrSet();
        ajaxAddPage1();
        $('.addScreen').click(function(){
                window.open("./threeModify1.html?category="+$(this).data('category'));
        })
        function ajaxAddPage(){
            $.ajax({
                type:"get",
                url:"./initScreen.json",
                dataType:"json",
                data:{},
                success:function(data){
                    for (var i = 0; i < data.length; i++) {
                        if(data[i].index>=0){
                            var str='';
                            var arr=data[i].attribute;
                            var str1='<div class="dragScreen fl" data-category="'+data[i].category+'">'+
                                    '<div class="screenBox">';
                            var str2='<img src="dragStatic/images/closeBtn.png" alt="" class="closeBtn"/>'+
                                    '</div>'+
                                    '</div>';
                            var str3='<div class="page" data-index="'+data[i].index+'">版面'+(data[i].index+1)+'</div>';
                            for (var j = 0; j < arr.length; j++) {
                                if(arr[j].flag=="true"){

                                    str+='<img src="'+arr[j].img+'" style="left:'+arr[j].left+';top:'+arr[j].top+';width:'+arr[j].width+';" class="'+arr[j].class+' moduleImg"/>';
                                }
                            }
                            str=str1+str+str2+str3;
                            $('.dragList').append(str);

                        }
                    }
                    /////当数据渲染完成之后，调用画布缩放函数setCanvasSize（）
                    ////参数说明：$('.dragScreen')画布对象，setWidth：用户设置的画布宽，setHeight：用户设置的画布高
                    // ，960：首次进入默认画布宽，540：首次进入默认画布高，1：标志是二级列表页调用此函数，因为拖拽页面也要调用这个函数二者功能处理不太相同
                    setCanvasSize($('.dragScreen'),setWidth,setHeight,960,540,1);
                    attrSet();///动态设置每个版面的样式
                    /////点击单个版面及新增版面按钮进入到编辑页面
                    $('.page').click(function(){
                        var currentIndex=$(this).data('index');
                        $('.dragScreen').each(function(i,e){
                            ////判断每个版面和版面按钮是否对应
                            if($(e).attr('index')==currentIndex){
                                window.open("./threeModify1.html?category="+$(e).data('category'));
                            }
                        });
                    });
                    /////点击叉号删除版面
                    $('.closeBtn').click(function(){
                        var res = confirm("您确定要删除当前版面吗？");
                        if(res == true){
                            $(this).parent().parent().remove();////删除可拖拽的布局
                            $('.page').eq($('.page').length-1).remove();////删除版面按钮
                            alert('删除成功');
                            ////删除成功后其他版面重新排版，父级盒子重新设置宽度
                            $('.dragScreen').Tdrag({
                                disable:false,//先禁止拖拽，否则位置会乱
                                scope:'.dragList',
                                pos:true,////拖拽松开图标自动归位
                                dragChange:true,///拖拽换位
                                axis:"x",
                                cbEnd:function(){//移动结束时候的回调函数
                                }
                            });
                            attrSet();
                        }else{
                            return;

                        }

                    })

                }
            })
        }
        function ajaxAddPage1(){
            var data;
            if(!window.localStorage){
                alert("浏览器支持localstorage");
                return false;
            }else{
                if(storage.getItem('userInfo')){
                    data= JSON.parse(storage.getItem('userInfo'));////data是个数组
                    for (var i = 0; i < data.length; i++) {
                        if(data[i].index>=0){
                            var str='';
                            var arr=data[i].attribute;
                            var str1='<div class="dragScreen fl" data-category="'+data[i].category+'">'+
                                    '<div class="screenBox">';
                            var str2='<img src="dragStatic/images/closeBtn.png" alt="" class="closeBtn"/>'+
                                    '</div>'+
                                    '</div>';
                            var str3='<div class="page" data-index="'+data[i].index+'">版面'+(data[i].index+1)+'</div>';
                            for (var j = 0; j < arr.length; j++) {
                                if(arr[j].flag=="true"){

                                    str+='<img src="'+arr[j].img+'" style="left:'+arr[j].left+';top:'+arr[j].top+';width:'+arr[j].width+';" class="'+arr[j].class+' moduleImg"/>';
                                }
                            }
                            str=str1+str+str2+str3;
                            $('.dragList').append(str);

                        }
                    }
                    /////调用画布比例计算函数，动态设置每个版面的宽高
                    setCanvasSize($('.dragScreen'),setWidth,setHeight,960,540,1);/////动态设置画布的尺寸
                    attrSet();///然后在设置一些位置属性信息
                    /////点击单个版面及新增版面按钮进入到编辑页面
                    $('.page').click(function(){
                        var currentIndex=$(this).data('index');
                        $('.dragScreen').each(function(i,e){
                            ////判断每个版面和版面按钮是否对应
                            if($(e).attr('index')==currentIndex){
                                /////按照索引对应好相应的版面内容
//                                window.location.href="./threeModify1.html?category="+$(e).data('category');
                                window.open("./threeModify1.html?category="+$(e).data('category'));

                            }
                        });
                    });
                    /////点击叉号删除版面
                    $('.closeBtn').click(function(){
                        var res = confirm("您确定要删除当前版面吗？");
                        if(res == true){
                            $(this).parent().parent().remove();////删除可拖拽的布局
                            $('.page').eq($('.page').length-1).remove();////删除版面按钮
                            alert('删除成功');
                            ////删除成功后其他版面重新排版，父级盒子重新设置宽度
                            $('.dragScreen').Tdrag({
                                disable:false,//先禁止拖拽，否则位置会乱
                                scope:'.dragList',
                                pos:true,////拖拽松开图标自动归位
                                dragChange:true,///拖拽换位
                                axis:"x",
                                cbEnd:function(){//移动结束时候的回调函数
                                }
                            });
                            attrSet();
                        }else{
                            return;

                        }

                    })
                }else{
                    ajaxAddPage();
                }
                /////循环遍历每个模块，将每个模块的信息存库
            }


        }
        function attrSet(){
            var perWidth=($('.dragScreen').width()+50);////每个版面宽度+50像素的间距，
            var perPage=($('.dragScreen').width()-$('.page').width())/2;////动态计算第一个版面按钮的left位置
            /////循环遍历，动态给每个版面设置left值
            $('.dragScreen').each(function(i,e){
                $(e).css({left:perWidth*i+'px'});
            });
            $('.page').each(function(i,e){
                $(e).css({left:perPage+perWidth*i+'px'});
            });
            $('.addScreen').css({left:perWidth*$('.dragScreen').length+'px',top:($('.dragScreen').height()-$('.addScreen').height())/2+'px'});
            $('.dragList').width($('.dragScreen').length*($('.dragScreen').width()+50)+160);///动态设置宽
            $('.dragScreen').Tdrag({
                scope:'.dragList',
                pos:true,////拖拽松开图标自动归位
                dragChange:true,///拖拽换位
                cbEnd:function(){//移动结束时候的回调函数
                }
            });
        }







    })
</script>
</html>